<template>
  <div class="home">
    <!-- 条件选择器 -->
    <!-- <el-row class="el-row-select">
      <el-col :span="7">
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <!-- 内容选择器 -->
    <!-- <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col> 
    </el-row> -->
    <el-form :inline="true" :model="searchForm" class="search-form-inline">
      <el-form-item label="项目编码" :disabled="true">
        <el-input v-model="searchForm.FBillNo" placeholder="项目编码"></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="searchForm.F_PKTL_ProjectName" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchButton(searchForm)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 投标详情 -->
    <div class="bidInticeList">
      <div id="biddingList" v-for="(item, i) in BiddingNoticeList" :key="i" @click="clickBidView(item)">
        <el-row :gutter="20">
          <!-- 列表图片 -->
          <el-col :span="3">
            <el-image :src="item.F_PKTL_ImageFileServer" :fit="fit"></el-image>
          </el-col>
          <!-- 列表详情 -->
          <el-col :span="17">
            <el-descriptions class="demo-item" :title="item.F_PKTL_ProjectName">
              <el-descriptions-item label="项目编号">{{ item.FBillNo }}</el-descriptions-item>
              <el-descriptions-item label="品名">{{ item.F_PKTL_MaterialName }}</el-descriptions-item>
              <el-descriptions-item label="材质">{{ item.F_PKTL_GoodMaterial }}</el-descriptions-item>
              <el-descriptions-item label="规格">{{ item.F_PKTL_MaterialSpec }}</el-descriptions-item>
              <el-descriptions-item label="起拍价">{{ item.F_PKTL_BeginAmount }}</el-descriptions-item>
              <el-descriptions-item label="预估数量">{{ item.F_PKTL_ForecastQty }}</el-descriptions-item>
              <el-descriptions-item label="延时分钟">{{ item.F_PKTL_DelayMinutes }}</el-descriptions-item>
              <el-descriptions-item label="起止时间">{{
                getDateFormat(item.F_PKTL_BeginDatetime, 'yyyy-MM-dd HH:mm') + '/' + getDateFormat(item.F_PKTL_EndDatetime, 'yyyy-MM-dd HH:mm')
              }}</el-descriptions-item>
              <el-descriptions-item label="保证金">{{ item.F_PKTL_PledgeAmount }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <!-- 列表状态 -->
          <el-col :span="3">
            <i v-if="item.F_PKTL_BidStatus == 1 || item.F_PKTL_BidStatus == ''" class="tl-icon-daikaishi"></i>
            <i v-if="item.F_PKTL_BidStatus == 2" class="tl-icon-jinhangzhong"></i>
            <i v-if="item.F_PKTL_BidStatus == 3" class="tl-icon-yijieshu"></i>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      fit: 'contain',
      businessInfo: '',
      // 数据列表
      BiddingNoticeList: [],
      // 金蝶查询参数
      params: {},
      // 金蝶查询属性数组
      fieldKeys: [
        'FBillNo',
        'F_PKTL_Date',
        'F_PKTL_ProjectName',
        'F_PKTL_MaterialType',
        'F_PKTL_BeginAmount',
        'F_PKTL_ForecastQty',
        'F_PKTL_DelayMinutes',
        'F_PKTL_BeginDatetime',
        'F_PKTL_EndDatetime',
        'F_PKTL_BiddingMode',
        'F_PKTL_MaterialName',
        'F_PKTL_GoodMaterial',
        'F_PKTL_MaterialSpec',
        'F_PKTL_IsNeedPledge',
        'F_PKTL_BidStatus',
        'F_PKTL_ImageFileServer',
        'F_PKTL_ServiceAgreement',
      ],
      total: 0,
      startRow: 0,
      limit: 0,
      searchForm: {},
      // 日期筛选
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      value1: '',
      value2: '',
    }
  },
  created() {
    this.buildParams()
    this.loadBusinessInfo()
  },
  beforeMount() {
    this.loadBidNoticeList()
  },
  methods: {
    buildParams() {
      this.params = {}
      this.params.FormId = 'PKTL_BiddingNotice'
      this.params.FieldKeys = this.fieldKeys.toString()
      ;(this.params.StartRow = this.startRow), (this.params.Limit = this.limit), (this.params.OrderString = 'FId desc')
      this.params.FilterString = [
        { Left: '((', FieldName: 'FDocumentStatus', Compare: 'StatusEqualto', Value: 'A', Right: ')', Logic: 'OR' },
        { Left: '(', FieldName: 'FDocumentStatus', Compare: 'StatusEqualto', Value: 'D', Right: '))', Logic: 'AND' },
      ]
      // this.params.FilterString=[
      //     {"Left":"(","FieldName":"F_PKTL_MaterialType","Compare":"=","Value":1,"Right":")","Logic":"AND"},
      //   ]
    },
    loadBusinessInfo() {
      this.$api.billBusinessInfo.queryBusinessInfo('PKTL_BiddingNotice').then((res) => {
        this.businessInfo = res
      })
    },
    loadBidNoticeList() {
      let data = { data: this.params }
      this.$api.biddingNotice.executeBillQuery(data).then((res) => {
        if (this.total == 0) {
          this.total = res.length
          this.limit = 5
        }
        let notictList = []
        res.forEach((item, i) => {
          if (this.limit > i) {
            let obj = Object.create(null)
            this.fieldKeys.forEach((fieldKey, i) => {
              if (fieldKey == 'F_PKTL_ImageFileServer') {
                obj[fieldKey] = this.$_global.srcURL + item[i] + '&dbId='+this.$_global.dbId
              } else {
                obj[fieldKey] = item[i]
              }
            })
            notictList.push(obj)
          }
        })
        this.BiddingNoticeList = notictList
      })
    },

    handleSizeChange(val) {
      this.startRow = 0
      this.limit = val
      this.loadBidNoticeList()
    },
    //待办列表，点击页码切换加载数据
    handleCurrentChange(val) {
      if (val == 1) {
        this.startRow = 0
        this.params.StartRow = this.startRow
      } else {
        this.startRow = val * this.limit - this.limit
        this.params.Limit = this.limit
        this.params.StartRow = this.startRow
      }
      this.loadBidNoticeList()
    },
    searchButton(searchData) {
      console.log('searchData')
      this.startRow = 0
      this.limit = 6
      this.total = 0
      this.buildParams()
      if (Object.keys(searchData).length > 0) {
        Object.keys(searchData).forEach((key) => {
          if(searchData[key]!=''){
            let filterItem = {
              Left: '(',
              FieldName: key,
              Compare: 'Like',
              Value: searchData[key],
              Right: ')',
              Logic: 'AND',
            }
            this.params.FilterString.push(filterItem)
          }
        })
      }

      console.log(this.params)
      this.loadBidNoticeList()
    },

    getDateFormat(fieldValue, dateStr) {
      return this.Common.dateFormat(fieldValue, dateStr)
    },
    clickBidView(item) {
      console.log(item)
      this.$router.push({ name: 'tenderView', query: { billNo: item.FBillNo } })
    },
  },
}
</script>

<style scoped>
.home {
  width: 80%;
  margin: auto;
  scroll-behavior: smooth;
}
.search-form-inline {
  margin-top: 10px;
}
.el-form-item {
  margin-bottom: 0px;
}
.bidInticeList {
  height: 925px;
  overflow-y: auto;
}
#biddingList {
  border: 1px;
  border-style: solid;
  border-color: #dcdfe6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  padding: 10px;
  margin: 10px;
}
.bidListImg {
  line-height: 143px;
}
.tl-icon-yijieshu {
  font-size: 70px;
  line-height: 143px;
}
.tl-icon-jinhangzhong {
  font-size: 70px;
  line-height: 143px;
  color: crimson;
}
.tl-icon-daikaishi {
  font-size: 70px;
  line-height: 143px;
  color: aquamarine;
}
</style>
